<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {
  deleteJoinAchievementApi,
  deleteJoinSoftPatentApi, deleteScientificProjectsParticipationApi,
  getJoinAchievementApi,
  getJoinAchievementDetailsApi,
  getJoinScientificProjectsParticipationApi,
  getJoinSoftPatentApi,
  getJoinSoftPatentDetailsApi, getScientificProjectsParticipationApi,
  getStudentListApi,
  joinAchievementApi, joinScientificProjectsParticipationApi,
  joinSoftPatentApi
} from "@/api/school.js";
import {useRoute} from "vue-router";
import useUserStore from "@/store/modules/user.js";

const userStore = useUserStore()

const {proxy} = getCurrentInstance();

const route = useRoute()
const state = reactive({
  tableData: [],
  studentList: [],
  formRules: {
    participantId: [
      {required: true, message: '请选择学生', trigger: 'change'},
    ],
  },
  editForm: {
    participantId: '',
    acFile: '',
    outputId: '',
  }
})

const showDia1 = ref(false)
const handleAdd = () => {
  showDia1.value = true
}

const handleEdit = async (joinId) => {
  const res = await getJoinScientificProjectsParticipationApi({id:joinId})
  if(res.code == 200){
    await searchStudent()
    state.editForm = res.data
  }
  showDia1.value = true
}

const searchStudent = async (query) => {
  const res = await getStudentListApi({stuName: query})
  if (res.code == 200) {
    state.studentList = res.data
  }
}

const handleClose = () => {
  showDia1.value = false
  state.editForm = {
    outputId:route.query.outPutId
  }
}

const submitForm = async () => {
  if(getIsStudent()){
    state.editForm.participantId = userStore.stuId
  }
  const res = await joinScientificProjectsParticipationApi(state.editForm)
  if (res.code == 200) {
    proxy.$message.success('操作成功')
    handleClose()
    await getDataList()
  }
}

// 查询列表
const getDataList = async () => {
  const params = {
    pacActualOutputId: state.editForm.outputId,
  }

  const res = await getScientificProjectsParticipationApi(params)
  if (res.code == 200) {
    state.tableData = res.data
    console.log(state.tableData, "state.tableData")
  }
}

// 删除数据
const handleDelete = (id) => {
  proxy.$modal.confirm('是否删除该数据？').then(async () => {
    const res = await deleteScientificProjectsParticipationApi({id})
    if (res.code == 200) {
      proxy.$modal.msgSuccess("删除成功")
    }
    await getDataList()
  })
}

const getIsStudent = () => {
  return userStore.roles.includes('student')
}

onMounted(() => {
  state.editForm.outputId = route.query.outPutId
  getDataList()
})
</script>

<template>
  <div class="outBox">
    <CardBox title="">
      <template #title-cont>
        <BackLink/>
      </template>
      <template #btn-cont>
        <el-button type="primary" @click="handleAdd">参与项目</el-button>
      </template>
      <template #content>
        <el-table :data="state.tableData" style="width: 100%">
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="stuName" label="参与人" align="center"/>
          <el-table-column prop="stuNum" label="学号" align="center"/>
          <el-table-column prop="stuFaculties" label="院系" align="center"/>
          <el-table-column prop="stuClass" label="年级" align="center"/>
          <el-table-column prop="yearEnrollment" label="班级" align="center">
            <template #default="scope">
              {{ scope.row.yearEnrollment }}级
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link @click="handleEdit(scope.row.joinId)">项目详情</el-button>
              <el-button type="danger" size="small" link @click="handleDelete(scope.row.joinId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </CardBox>
    <el-dialog title="参与实战" v-model="showDia1" width="800" align-center>
      <div>
        <el-form label-width="120px" ref="formRef2" :model="state.editForm" :rules="state.formRules">
          <el-row>
            <el-col :span="24">
              <el-form-item label="参与人" prop="participantId" v-if="!getIsStudent()">
                <el-select v-model="state.editForm.participantId"
                           placeholder="请选择"
                           style="width: 200px;"
                           filterable
                           remote
                           reserve-keyword
                           :remote-method="searchStudent">
                  <el-option v-for="item in state.studentList" :key="item.id"
                             :label="`${item.stuClass}-${item.stuName}`" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form label-width="150" label-position="top">
          <el-form-item label="上传图片/视频/文档：" label-position="top" label-width="150">
            <div class="uploadBox">
              <FileUpload
                  :multiple="false"
                  :limit="1"
                  v-model="state.editForm.acFile"
              />
            </div>
          </el-form-item>
        </el-form>

        <div class="footer">
          <el-button @click="handleClose">返回</el-button>
          <el-button type="primary" @click="submitForm" v-if="!state.editForm.id">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.uploadBox {
  margin-left: 50px;
}

.footer {
  text-align: center;
}
</style>
